<template>
  <div class="main">
    <Header :car-page="true">
      <BackHome/>
      <div class="divider"></div>
        <a-select
        v-model:value="area.id"
        size="small"
        style="width: 13.125rem"
        :options="area.data"
        @change="onAreaChange">
      <template #suffixIcon>
        <svg t="1659511408750" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2332" width="12" height="12"><path d="M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z" p-id="2333" fill="#ffffffd9"></path></svg>
      </template>
      </a-select>
    </Header>
    <CarMap ref="refMap" :start-time="config.startTime" :end-time="config.endTime" :vin="config.id" :table-type="config.tableType"></CarMap>
    <TimeRangeQueryTool class="query_tool" @time-query="timeQuery" :start-time="config.startTime" :end-time="config.endTime">
      <a-input class="veh_id" v-model:value="config.id" placeholder="请输入车辆ID"/>
    </TimeRangeQueryTool>
    <div class="right container_vert_divide3">
      <Box title="车辆信息" class="right_1">
        <info :data="vehicleInfoStats"></info>
      </Box>
      <Box title="车速监控" class="right_2">
        <BrokenLineChart :data="speedStats.data" :x-axis="speedStats.xAxis" :color-array="speedStats.colorArray" :line-config="speedStats.config"></BrokenLineChart>
      </Box>
      <Box title="车辆行为画像" class="right_3">
        <RadarChart :data="behaviorStats"></RadarChart>
      </Box>
    </div>
  </div>
</template>

<script setup>
/**
 * 主页入口
 * @author dingyi
 */
import { onMounted, ref, reactive, nextTick } from 'vue';
import Box from '@/components/Box.vue';
import Info from './body/Info.vue';
import Header from './header/Header.vue';
import BackHome from './body/BackHome.vue';
import BrokenLineChart from '@/components/BrokenLineChart.vue';
import RadarChart from '@/components/RadarChart.vue';
import TimeRangeQueryTool from './body/TimeRangeQueryTool.vue';
import CarMap from './body/CarMap.vue';
import { useRoute, useRouter } from 'vue-router';
import { vehicleInfo, speed, behavior } from '@/api/car';
import moment from 'moment';
import { message } from 'ant-design-vue';
const route = useRoute();
const router = useRouter();
const {id, tableType, startTime, endTime, areaId } = route.query;
const defQueryTime = getDefaultQueryTime();
const config = reactive({
  id,
  tableType: parseInt(tableType),
  startTime: startTime?parseInt(startTime):defQueryTime.startTime,
  endTime: endTime?parseInt(endTime):defQueryTime.endTime
})
const area = reactive({
  id: areaId?parseInt(areaId):1,
  data: [
    {
      label: '苏州',
      value: 1
    },
     {
      label: '上海',
      value: 2
    },
     {
      label: '南京',
      value: 3
    },
     {
      label: '亦庄',
      value: 4
    },
     {
      label: '太和桥',
      value: 5
    }
  ]
})
const carId = ref(null);
const refMap = ref(null);
const analysisUrl = ref(window.g.synergyUrl);
// 车辆信息
const vehicleInfoStats = ref([
  {
    name: '车辆ID',
    value: undefined
  },
  {
    name: '车型',
    value: undefined
  },
  {
    name: '平均车速',
    value: undefined
  },
  {
    name: '设备',
    value: undefined
  }
]);

// 车速监控
const speedStats = reactive({
  xAxis: [],
  data: [],
  colorArray: ['rgba(0, 190, 255, 0.25)', 'rgba(5, 84, 119, 0.25)', 'rgba(7, 27, 45, 0.25)'],
  config:{
    smooth: false,
    symbol: 'circle',
    symbolSize: 10
  }
});

// 车辆行为
const behaviorStats = ref([]);

/** 车辆信息 */
const getVehicleInfo = (data) => {
  vehicleInfo(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      vehicleInfoStats.value[0].value = data.vehId;
      vehicleInfoStats.value[1].value = data.type;
      vehicleInfoStats.value[2].value = data.avaSpeed + 'km/h';
      let travelTime = data.travelTime;
      travelTime = travelTime >= 60 ? (Math.floor(travelTime / 60) + 'h' + (travelTime % 60) + 'min') : travelTime + 'min';
      vehicleInfoStats.value[3].value = travelTime;
    }
  });
};

/** 车速监控 */
const getSpeed = (data) => {
  speed(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      speedStats.xAxis = data.map(({ timePoint }) => timePoint);
      speedStats.data = data.map(({ value }) => value);
    }
  });
};

/** 车辆行为 */
const getBehavior = (data) => {
  behavior(data).then(({ retCode, data }) => {
    if (retCode === '0000_0') {
      behaviorStats.value = data.map(({ behavior, value }) => {
        return { name: behavior, value };
      });
    }
  });
};
/** 请求页面图表数据 */
const getPageData = () => {
  const date = moment(config.endTime).format('YYYY-MM-DD');
  const vehId = config.id;
  const data = {date, vehId};
  getVehicleInfo(data);
  getSpeed(data);
  getBehavior(data);
};
/**获取请求默认时间范围 */
function getDefaultQueryTime(){
  const time = moment().endOf('day').valueOf();
  return {
    startTime: time - 24*60*60*1000,
    endTime: time - 2*24*60*60*1000 + 1
  }
}

const timeQuery = ({startTime, endTime}) => {
  config.startTime = moment(startTime, 'YYYY-MM-DD HH:mm:ss').valueOf();
  config.endTime = moment(endTime, 'YYYY-MM-DD HH:mm:ss').valueOf();
  if (config.id === undefined) {
    message.warning("请输入车辆编号！");
  } else {
    getPageData();
    nextTick(() =>{
      refMap.value.query();
    })
  }
};
/** 示范区改变 */
const onAreaChange = (v) => {
  router.push({
    path: '/Area',
    query: {
      id: v
    }
  });
};

onMounted(() => {
  if (config.id) {
    getPageData();
    refMap.value.query();
  }
});
</script>

<style lang="less" scoped>
.right {
  right: var(--hMargin);
  height: calc(100% - var(--headerHeight) - var(--vMargin));
  width: 28.5%;
  position: absolute;
  bottom: var(--vMargin);
  right: var(--hMargin);
}

.right_1 {
  height: calc((100% - var(--vMargin)- var(--vMargin)) * 0.2);
}
.right_2 {
  height: calc((100% - var(--vMargin)- var(--vMargin)) * 0.4);
}
.right_3 {
  height: calc((100% - var(--vMargin)- var(--vMargin)) * 0.4);
}
.query_tool {
  position: absolute;
  left: var(--hMargin);
  top: var(--headerHeight);
}

.veh_id {
  width: 9.375rem;
  background-color: rgba(11, 60, 100, 0.5);
}

.divider {
  width: 1px;
  height: 1.375rem;
  border-left: 1px solid #49a9d2;
  margin: 0 1rem;
}

/deep/ .ant-select-selector {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(9, 28, 46, 0.8) !important;
  border: solid 1px rgba(9, 28, 46, 1) !important;
  text-align: left;
}
/deep/ .ant-select-arrow {
  color: white !important;
}
</style>
